<template>
  <a-skeleton active :loading="loading" :paragraph="{rows: 24}" style="background-color: #fff;margin-top: 20px">
    <div style="padding: 10px;background-color: #fff;">
      <a-row>
        <a-col :span="span" v-for="(movie, index) in movies" :key="index" style="padding: 1rem;">
          <a-card class="movie-card" style="width: 200px" @click="detail(movie.bookId)">
            <img :src="movie.imageURLM" style="width: 198px; height: 300px;"/>
            <div class="movie-desc">
              <div class="movie-title" :title="movie.bookTitle"><p>{{movie.bookTitle}}</p></div>
              <p style="color: #aaa;margin-bottom: .2rem">作者：{{movie.bookAuthor}}</p>
              <p>出版日期：{{movie.yearOfPublication}}</p>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <div style="text-align: right">
        <a-pagination v-model="formData.curPage" :total="total" show-less-items @change="handleChangePage"/>
      </div>

    </div>
  </a-skeleton>
</template>
<script>
  import ACol from "ant-design-vue/es/grid/Col";
  export default {
    name: 'bookQuery',
    components: {ACol},
    data () {
      return {
        loading: true,
        movies: [],
        span: '',
        screenWidth: document.body.clientWidth,
        timer: null,
        formData:{
          curPage:1,
          pageSize:8,
          userId:''
        },
        total:0,
        advanced: true,
      }
    },
    methods: {
      detail (id) {
        this.$emit('bookDetail',id)
      },
      getDate (tm) {
        return new Date(tm * 1000).toLocaleString()
      },
      handleChangePage(current) {
        this.formData.curPage = current;
        this.search();
      },
      search() {
        let user = JSON.parse(localStorage.getItem('USER'));
        this.formData.userId =user.userId;
        this.$formPost('books/getRecommendList',this.formData).then((data)=> {
          console.log(data)
          if(data.status == 1){
            this.movies = data.data.rows
            this.total = data.data.total
            this.loading = false
          }
        })
      }
    },
    mounted () {
      const that = this
      let val = window.innerWidth
      if (val > 1660) {
        this.span = 4
      } else if (val > 1250) {
        this.span = 6
      } else if (val > 1000) {
        this.span = 8
      } else if (val > 900) {
        this.span = 10
      } else {
        this.span = 12
      }
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
        })()
      }
      this.search();
    },
    watch: {
      screenWidth (val) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.screenWidth = val
          if (val > 1660) {
            this.span = 4
          } else if (val > 1250) {
            this.span = 6
          } else if (val > 1000) {
            this.span = 8
          } else if (val > 900) {
            this.span = 10
          } else {
            this.span = 12
          }
        }, 100)
      }
    }
  }
</script>
<style lang="less">
  .movie-card {
    .ant-card-body {
      padding: 0 !important;
    }
    .movie-desc {
      padding: 1rem 0 0 0;
      text-align: center;
      .movie-title {
        font-size: .9rem;
        font-weight: 600;
        margin-bottom: .2rem;
        p {
          margin-bottom: 0 !important;
        }
      }
    }
    &:hover {
      cursor: pointer;
      box-shadow: 4px 0 8px 0 rgba(29, 35, 41, 0.1);
    }
  }
  .movie-detail {
    p {
      margin-bottom: .4rem;
    }
    .poster {
      margin-right: -4rem;
      .poster-img {
        width: 198px;
        height: 300px;
      }
    }
  }
</style>
